<template>
  <OrderCardLayout>
    <view slot="header">
      <Top :area-name="areaName" :status="data.status" :status-options="orderStatus" />
    </view>
    <view slot="body">
      <view class="order-card__body-item">
        <DateInfo v-model="showMore" :date="data.createdAt" />
      </view>
      <view v-if="showMore" class="order-card__body-item">
        <GoodsInfo v-if="showMore" :data="data.orderGoods" />
      </view>
      <view class="order-card__body-item">
        <Total :num="totalNum" :total="data.total" />
      </view>
      <view v-if="showMore" class="order-card__body-item">
        <Remark :remark="data.buyerRemark" />
      </view>
      <view class="order-card__body-item">
        <OrderNo :no="data.orderNo" />
      </view>
      <view class="order-card__footer-wrap order-card__body-item">
        <button type="default" size="mini" class="action-btn" @click="printer">打印</button>
        <!-- <button v-if="data.status==1" type="primary" size="mini" class="action-btn" @click="onHandleOrder">接单</button> -->
      </view>
    </view>
  </OrderCardLayout>
</template>

<script>
import OrderCardLayout from "./OrderCardLayout.vue";
import Top from "./Top.vue";
import DateInfo from "./DateInfo.vue";
import GoodsInfo from "./GoodsInfo.vue";
import ReceiptInfo from "./ReceiptInfo.vue";
import Remark from "./Remark.vue";
import Total from "./Total.vue";
import OrderNo from "./OrderNo.vue";
import { orderData } from "../../../utils/printerData";
import { orderStatus } from "../../../config/status";
import { mapActions } from "vuex";
import { EMIT_TYPE } from "../../../config/consts";
import global from "../../../config/global";
export default {
  components: {
    OrderCardLayout,
    Top,
    DateInfo,
    GoodsInfo,
    ReceiptInfo,
    Remark,
    Total,
    OrderNo
  },
  props: {
    data: {
      type: Object,
      default() {
        return {
          tableNo: "13桌",
          createdAt: "2020-05-06",
          status: 2,
          orderGoods: [
            {
              id: 105,
              orderId: 83,
              skuId: 44,
              num: 1,
              title: "鱼香肉丝",
              price: "16.78",
              spec: [
                {
                  key: "分量",
                  value: "大份"
                }
              ],
              props: []
            },
            {
              id: 105,
              orderId: 83,
              skuId: 44,
              num: 1,
              title: "鱼香肉丝",
              price: "16.78",
              spec: [
                {
                  key: "分量",
                  value: "大份"
                }
              ],
              props: [
                {
                  k: "辣度",
                  v: ["辣"],
                  id: "辣度辣"
                }
              ]
            }
          ],
          buyerRemark: "啊都快放假啦谁放假了撒的方式地方",
          total: "15.20"
        };
      }
    }
  },
  data() {
    return {
      showMore: false,
      orderStatus: orderStatus
    };
  },
  computed: {
    totalNum() {
      let a = 0;
      this.data.orderGoods.forEach(v => {
        a = a + v.num;
      });
      return a;
    },
    // 桌台及区域名
    areaName() {
      return this.data.tableInfo.groupName + " " + this.data.tableInfo.tableNo;
    }
  },
  methods: {
    ...mapActions({
      socketPrint: "socketPrint",
      handleOrder: "handleOrder"
    }),
    printer() {
      let orderPrintData = orderData(this.data);
      this.$printerUtil.printToAll(orderPrintData, res => {
        console.log(res);
      });
    },
    onHandleOrder() {
      uni.showLoading();
      this.handleOrder({ orderId: this.data.id }).then(res => {
        uni.hideLoading();
        if (!res.code) {
          uni.$emit(EMIT_TYPE.UPDATE_ORDER_LIST, {
            orderId: this.data.id
          });
          uni.showToast({
            icon: "none",
            title: "操作成功"
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
$padding-left: 50rpx;
$padding-top: 20rpx;
$font-size-base: $uni-font-size-lg;
$font-size-ms: $uni-font-size-base;
// .order-card__date-wrap,
// .order-card__receipt-wrap,
// .order-card__goods-wrap,
// .order-card__total-wrap,
// .order-card__no-wrap {
//   $padding-left: 40rpx;
//   $padding-left: 40rpx;
// }
.order-card__body-item {
  margin-top: 24rpx;
}
.order-card__footer-wrap {
  margin-top: 24rpx;
  overflow: hidden;
  .action-btn {
    float: right;
    margin-left: 20rpx;
  }
}
</style>
